<template>
	<view class="container">
<!-- 		<view class="nav-bar">
			<view class="left" @click="back">
				<u-icon name="arrow-left" size="40" color="#333"></u-icon>
			</view>
			<view class="title">{{questionaireName}}</view>
			<view class="left"></view>
		</view> -->
		<scroll-view scroll-y="true" class="content">
			<view class="empty-hint" v-if="reportsList.length === 0 && !isLoading">
				<u-empty mode="list" description="暂无评估报告"></u-empty>
			</view>
			<view class="reports-list" v-else>
				<view class="report-item" v-for="(item, index) in reportsList" :key="item.id" :style="{'--highlight-color': getTypeColor(questionaireName)}">
					<view class="report-icon" :style="{ backgroundColor: getTypeColor(questionaireName) }">
						<u-icon name="file-text" size="40" color="#fff"></u-icon>
					</view>
					<view class="report-info">
						<view class="report-title">{{ questionaireName }}</view>
						<view class="report-date">{{ formatTime(item.createTime) }}</view>
					</view>
					<view class="report-score" :style="{ marginRight: '20rpx'}">
						<text :style="{ color: getScoreColor(item.score) }">{{ item.score }}分</text>
					</view>
				</view>
			</view>
			<view class="loading" v-if="isLoading">
				<u-loading-icon mode="circle" color="#2979ff"></u-loading-icon>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getQuestionaireLogIdList,getQuestionaire } from '@/common/api.js'
	export default {
		data() {
			return {
				questionaireId: '',
				questionaireName: '',
				reportsList: [],
				isLoading: true
			}
		},
		onLoad(options) {
			this.questionaireId = options.id
			this.loadReports()
		},
		methods: {
			async loadReports() {
				// console.log('加载报告的问卷 ID：', this.questionaireId);
				// 从本地存储加载报告数据
				try {
					const res = await getQuestionaireLogIdList( this.questionaireId );
					this.reportsList = res.data;
					
					const Qres = await getQuestionaire( this.questionaireId );
					this.questionaireName = Qres.data.name;
				} catch (e) {
					console.error('获取报告失败', e)
					uni.showToast({
						  title: '加载失败',
						  icon: 'none'
						});
				} finally {
					this.isLoading = false
				}
			},
			back() {
				uni.navigateBack()
			},/* 
			viewReport(reportId) {
				// 从reportsList中找到对应的报告数据
				const report = this.reportsList.find(item => item.id === reportId);
				if (report) {
					uni.navigateTo({
						url: `/pages/assessment/report?type=${report.type}&score=${report.score}`
					});
				} else {
					uni.showToast({
						title: '未找到报告详情',
						icon: 'none'
					});
				}
			}, */
			getTypeColor(type) {
				const typeColors = {
					'复发风险感知': '#5D7EF5',
					'行为决策': '#5D7EF5',
					'健康行为': '#4CD964',
					'自我效能': '#722ED1'
				}
				return typeColors[type] || '#999'
			},
			getHealthStatus(score) {
				if (score >= 80) {
					return '优秀'
				} else if (score >= 60) {
					return '良好'
				} else if (score >= 40) {
					return '一般'
				} else {
					return '较差'
				}
			},
			getHealthStatusClass(score) {
				if (score >= 80) {
					return 'excellent'
				} else if (score >= 60) {
					return 'good'
				} else if (score >= 40) {
					return 'average'
				} else {
					return 'poor'
				}
			},
			formatTime(timestamp) {
				const date = new Date(timestamp.replace(/-/g, '/'));
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hour = date.getHours().toString().padStart(2, '0');
				const minute = date.getMinutes().toString().padStart(2, '0');
				const second = date.getSeconds().toString().padStart(2, '0');
				
				// 格式化为：2023年06月15日 14:30:00
				return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
				// return `${year}年${month < 10 ? '0' + month : month}月${day < 10 ? '0' + day : day}日 ${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
			},
			getScoreColor(score) {
				if (score >= 80) {
					return '#4CD964'; // 绿色 - 优秀
				} else if (score >= 60) {
					return '#1890FF'; // 蓝色 - 良好
				} else if (score >= 40) {
					return '#F5A623'; // 黄色 - 一般
				} else {
					return '#FF6B6B'; // 红色 - 较差
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f7fa;
		
		.nav-bar {
			display: flex;
			align-items: center;
			height: 90rpx;
			padding: 0 30rpx;
			background-color: #fff;
			border-bottom: 1px solid #f0f0f0;
			position: relative;
			z-index: 10;
			
			.left {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.title {
				flex: 1;
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.content {
			flex: 1;
			padding: 30rpx;
		}
		
		.empty-hint {
			margin-top: 100rpx;
		}
		
		.reports-list {
			.report-item {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
				display: flex;
				align-items: center;
				transition: all 0.3s ease;
				position: relative;
				overflow: hidden;
				
				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					height: 100%;
					width: 8rpx;
					background-color: var(--highlight-color, #4CD964);
				}
				
				&:active {
					transform: scale(0.98);
					box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
				}
				
				.report-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
					flex-shrink: 0;
				}
				
				.report-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					
					.report-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 8rpx;
					}
					
					.report-date {
						font-size: 26rpx;
						color: #999;
					}
				}
				
				.report-score {
					display: flex;
					align-items: center;
					flex-shrink: 0;
					margin-left: 20rpx;
					
					text {
						font-size: 32rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}
				}
			}
		}
		
		.loading {
			display: flex;
			justify-content: center;
			padding: 30rpx 0;
		}
	}
</style> 